<template>
  <div>
    <Row :gutter="10">
      <Col>
        <Card>
          <div class="live_wrapper clearfix" style="margin-top: 10px">
            <div class="flex-row" style="justify-content: space-between">
              <div class="flow">
                <Select v-model="filter.shop_id"
                        style="width: 210px;margin: 0 10px 10px 0"
                        filterable
                        label-in-value
                        @on-change="search"
                        placeholder="请选择门店">
                  <Option :value="0">全部门店</Option>
                  <Option :value="item.id" v-for="(item, index) in shop_list" :key="index">{{ item.name }}</Option>
                </Select>
                <Select v-model="filter.audit_state"
                        style="width: 210px;margin: 0 10px 10px 0"
                        filterable
                        label-in-value
                        @on-change="search"
                        placeholder="请选择审核状态">
                  <Option :value='-1'>全部</Option>
                  <Option :value='0'>待审核</Option>
                  <Option :value='1'>审核通过</Option>
                  <Option :value='2'>审核拒绝</Option>
                </Select>
                <Input v-model="filter.name"
                       @on-search="search"
                       search
                       enter-button="搜索"
                       placeholder="请输入客户姓名"
                       style="width: 210px;margin: 0 10px 10px 0" />
                <Input v-model="filter.phone"
                       @on-search="search"
                       search
                       enter-button="搜索"
                       placeholder="请输入手机号码"
                       style="width: 210px;margin: 0 10px 10px 0" />
              </div>
              <div>
                <Button type="primary"
                        @click.stop="exportData()"
                        style=" width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出
                </Button>
              </div>
            </div>
          </div>

          <p class="admin_title">全部退款</p>

          <Row class="margin-top-10 table_pattern table_pattern2">
            <Table style="width: calc(100vw - 256px - 36px - 32px)"
                   :loading="loading"
                   :columns="columns"
                   :data="list"></Table>
          </Row>
          <Row class="margin-top-10">
            <Page :total="pagenation.totalPage"
                  :page-size="pagenation.perPage"
                  :current="pagenation.currentPage"
                  show-elevator
                  show-total
                  @on-change="change"></Page>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal v-model="showAuditModal"
           title="退款审核"
           width="40%"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="80"
            style="width: 90%;margin: 0 auto;padding: 25px 0 10px;">
        <FormItem label="审核结果" class="label_required">
          <RadioGroup v-model="formValidate.refund_audit_state">
            <Radio :label="1">通过</Radio>
            <Radio :label="2">不通过</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="拒绝理由" v-if='formValidate.refund_audit_state == 2'>
          <Input v-model="formValidate.refund_audit_remark"
                 type="textarea"
                 :rows="4"
                 placeholder="请输入拒绝理由" />
        </FormItem>
      </Form>
      <div class="btns">
        <Button :loading="isSubmitting" type="primary" @click="auditSubmit">提交</Button>
      </div>
    </Modal>

    <Modal v-model="showDetailModal"
           title="退款详情"
           width="40%"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <div class="flex modal-detail">
        <div class="title">订单相关信息</div>
        <div class="item"><span>门店:</span>{{ orderInfo.shop_name }}</div>
        <div class="item"><span>订单号:</span>{{ orderInfo.order_sn }}</div>
        <div class="item"><span>商品名称:</span>{{ orderInfo.good_name }}</div>
        <div class="item"><span>金额(元):</span>{{ orderInfo.money }}</div>
        <div class="item"><span>下单时间:</span>{{ orderInfo.created_time }}</div>

        <div class="title">申请人相关信息</div>
        <div class="item"><span>客户姓名:</span>{{ orderInfo.name }}</div>
        <div class="item"><span>客户电话:</span>{{ orderInfo.phone }}</div>
        <div class="item"><span>退款理由:</span>{{ orderInfo.refund_remark }}</div>

        <div class="title">审核信息</div>
        <div class="item"><span>审核状态:</span>{{ orderInfo.refund_audit_state_name }}</div>
        <div class="item"><span>审核备注:</span>{{ orderInfo.refund_audit_remark }}</div>
        <div class="item"><span>审核人员:</span>{{ orderInfo.refund_audit_admin_name }}</div>
        <div class="item"><span>审核时间:</span>{{ orderInfo.refund_audit_time }}</div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { childBtnPermission, shopForSelect, refundList, auditOrderRefund } from '@/api/main'

export default {
  name: "refund-list",
  data () {
    return {
      permissionList: [],
      isSubmitting: false,
      loading: true,
      pagenation: {},
      list: [],
      columns: [
        {
          key: 'order_sn',
          title: '订单号',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.order_sn)
          },
        },
        {
          key: 'name',
          title: '客户姓名',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          width: 150,
          title: '手机号码',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'shop_name',
          title: '门店',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.shop_name)
          },
        },
        {
          key: 'good_name',
          title: '商品',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.good_name)
          },
        },
        {
          key: 'money',
          title: '退款金额(元)',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.money)
          },
        },
        {
          key: 'created_time',
          title: '下单时间',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          key: 'refund_audit_state_name',
          title: '审核状态',
          width: 150,
          align: 'center',
          render: (h, params) => {
            let state = params.row.refund_audit_state
            let color = state === 0 ? '#2B76EE' : state === 2 ? '#D40303' : '#07BD21'
            return h('strong', { style: { color } }, params.row.refund_audit_state_name)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                  'Button',
                  {
                    props: {
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      border: 0,
                      background: 'transparent',
                      fontSize: '14px',
                      color: '#377EEF',
                    },
                    on: {
                      click: () => {
                        this.orderInfo = Object.assign({}, params.row)
                        this.showDetailModal = true
                      },
                    },
                  },
                  '详情',
              ),
              h(
                  'Button',
                  {
                    props: {
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      border: 0,
                      background: 'transparent',
                      fontSize: '14px',
                      color: '#377EEF',
                      display: (this.permissionList.indexOf('refund-audit') !== -1 && params.row.refund_audit_state == 0) ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.formValidate.id = params.row.id
                        this.showAuditModal = true
                      },
                    },
                  },
                  '审核',
              )
            ])
          },
        },
      ],
      filter: {
        page: 0,
        page_size: 20,
        shop_id: 0,
        name: '',
        phone: '',
        audit_state: -1,
      },
      formValidate: {
        id: 0,
        refund_audit_state: 1, // 审核结果(1:审核成功 2:审核失败)
        refund_audit_remark: '',
      },
      showAuditModal: false,
      shop_list: [],
      showDetailModal: false,
      orderInfo: {}
    }
  },
  watch: {},
  methods: {
    auditSubmit () {
      if (!this.formValidate.refund_audit_state) {
        this.$Message.error("请选择审核结果");
        return;
      }

      if (this.formValidate.refund_audit_state == 2 && !this.formValidate.refund_audit_remark) {
        this.$Message.error("请输入拒绝理由");
        return;
      }

      // console.log(this.formValidate);return false;

      if (this.isSubmitting) return
      this.isSubmitting = true

      auditOrderRefund(this.formValidate).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.showAuditModal = false
          this.search()
        } else {
          this.$Message.error(res.text)
        }
        setTimeout(() => this.isSubmitting = false, 1000)
      })
    },
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.getList()
    },
    search: function () {
      this.filter.page = 0
      this.getList()
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      refundList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            setTimeout(() => {
              _this.export()
            }, 500)
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['门店名称', '订单号', '商品名称', '客户姓名', '客户手机号', '退款金额', '退款状态', '申请时间'];
            const filterVal = ['shop_name', 'order_sn', 'good_name', 'name', 'phone', 'money', 'refund_audit_state_name', 'created_time'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '退款信息')
          }
        }
      })
    },
    getPermissionList (parent_name) {
      childBtnPermission({ parent_name }).then(res => {
        if (res.code === 0) {
          this.permissionList = res.data
        }
      })
    },
    getList () {
      refundList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
  },
  mounted () {
    this.getPermissionList('refund-list')
    this.getList()

    shopForSelect().then(res => {
      if (res.code === 0) {
        this.shop_list = res.data || []
      }
    })
  },
}
</script>

<style scoped lang="less">
.modal-detail {
  padding: 0 5% 40px;

  .title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333333;
  }

  .item {
    margin-left: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #666666;

    span {
      width: 140px;
      flex-shrink: 0;
    }

    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
